<template>
  <div ref="dom"
    style="width:800px;height:700px;">
  </div>
</template>

<script>
const echarts = require("echarts");

const image = require("./logo.png");
// const svg = require("./china.svg");
require("echarts-wordcloud");

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const dom = this.$refs.dom;

      const chart = echarts.init(dom);
      var keywords = {
        max: 3393,
        title: 38497,
        formatter: 15214,
        slider: 7236,
        legend: 66514,
        grid: 28516,
        smooth: 1295,
        smoothMonotone: 696,
        sampling: 757,
        feature: 12815,
        saveAsImage: 2616,
        polar: 6279,
        calculable: 879,
        backgroundColor: 9419,
        excludeComponents: 130,
        show: 20620,
        text: 2592,
        icon: 2782,
        dimension: 478,
        inRange: 1060,
        animationEasing: 2983,
        animationDurationUpdate: 2259,
        animationDelayUpdate: 2236,
        animationEasingUpdate: 2213,
        xAxis: 89459,
        angleAxis: 5469,
        showTitle: 484,
        dataView: 2754,
        restore: 932,
        timeline: 10104,
        range: 477,
        value: 5732,
        precision: 878,
        target: 1433,
        zlevel: 5361,
        symbol: 8718,
        interval: 7964,
        symbolSize: 5300,
        showSymbol: 1247,
        inside: 8913,

        splitArea: 4775,

        radiusAxisIndex: 354,
        scaleLimit: 1313,
        geoIndex: 535,
        regions: 1892,
        itemHeight: 1290,
        nodes: 644,
        candlestick: 3166,
        crossStyle: 466,
        edges: 369,
        links: 3277,
        layout: 846,
        barBorderColor: 721,
        barBorderWidth: 498,
        treemap: 3865,
        y: 367,
        valueIndex: 704,
        showLegendSymbol: 482,
        mapValueCalculation: 492,
        optionToContent: 264,
        handleColor: 187,
        handleSize: 271,
        showContent: 1853,
        angleAxisIndex: 406,
        endValue: 327,
        triggerOn: 1720,
        contentToOption: 169,
        buttonColor: 71,
        rotate: 1144,
        hoverLink: 335,
        outOfRange: 491,
        textareaColor: 58,
        textareaBorderColor: 58,
        textColor: 60,
        buttonTextColor: 66,
        category: 336,
        hideDelay: 786,
        alwaysShowContent: 1267,
        extraCssText: 901,
        effectType: 277,
        force: 1820,
        rippleEffect: 723,
        edgeSymbolSize: 329,
        showEffectOn: 271,
        gravity: 199,
        edgeLength: 193,
        layoutAnimation: 152,
        length2: 169,
        enterable: 957,
        dim: 83,
        readOnly: 143,
        levels: 444,
        textGap: 256,
        pixelRatio: 84,
        nodeScaleRatio: 232,
        draggable: 249,
        brushType: 158,
        radarIndex: 152,
        large: 182,
        edgeSymbol: 675,
        largeThreshold: 132,
        leafDepth: 73,
        childrenVisibleMin: 73,
        minSize: 35,
        maxSize: 35,
        sort: 90,
        funnelAlign: 61,
        source: 336,
        nodeClick: 200,
        curveness: 350,
        areaSelectStyle: 104,
        parallelIndex: 52,
        initLayout: 359,
        trailLength: 116,
        boxWidth: 20,
        back: 53,
        rewind: 110,
        zoomToNodeRatio: 80,
        squareRatio: 60,
        parallelAxisDefault: 358,
        checkpointStyle: 440,
        nodeWidth: 49,
        color0: 62,
        layoutIterations: 56,
        nodeGap: 54,
        "color(Array": 76,
        "<string>)": 76,
        repulsion: 276,
        tiled: 105,
        currentIndex: 145,
        axisType: 227,
        loop: 97,
        playInterval: 112,
        borderColor0: 23,
        gap: 43,
        autoPlay: 123,
        showPlayBtn: 25,
        breadcrumb: 119,
        colorMappingBy: 85,
        id: 18,
        blurSize: 85,
        minOpacity: 50,
        maxOpacity: 54,
        prevIcon: 12,
        children: 21,
        shape: 98,
        nextIcon: 12,
        showNextBtn: 17,
        stopIcon: 21,
        visibleMin: 83,
        visualDimension: 97,
        colorSaturation: 56,
        colorAlpha: 66,
        emptyItemWidth: 10,
        inactiveOpacity: 4,
        activeOpacity: 4,
        showPrevBtn: 19,
        playIcon: 26,
        ellipsis: 19,
        gapWidth: 19,
        borderColorSaturation: 10,
        handleIcon: 2,
        handleStyle: 6,
        borderType: 1,
        constantSpeed: 1,
        polyline: 2,
        blendMode: 1,
        dataBackground: 1,
        textAlign: 1,
        textBaseline: 1,
        brush: 3
      };

      var data = [];
      for (var name in keywords) {
        data.push({
          name: name,
          value: Math.sqrt(keywords[name])
        });
      }
      var maskImage = new Image();
      var option = {
        series: [
          {
            type: "wordCloud",
            // 文字大小最大最小
            sizeRange: [10, 60],
            // 文字的旋转角度
            rotationRange: [-60, 90],
            rotationStep: 45,
            gridSize: 9,
            shape: "pentagon",
            width: "100%",
            height: "100%",
            maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(",") +
                    ")"
                  );
                }
              }
            },
            data: data.sort(function(a, b) {
              return b.value - a.value;
            })
          }
        ]
      };

      maskImage.src = image;
      maskImage.onload = function() {
        chart.setOption(option);
      };
    }
  }
};
</script>